<template>
  <div class="dashboard-container">
    <div class="main-content">
      <!-- 头部区域 -->
      <div class="header-section">
        <h1>绿益农联综合管理平台</h1>
        <p>专注于农产品全流程管理</p>
      </div>

      <!-- 功能区域 -->
      <div class="function-area">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="function-card" @click="goToProducts">
              <div class="card-icon">
                <el-icon><Goods /></el-icon>
              </div>
              <div class="card-info">
                <h3>商品管理</h3>
                <p>农产品信息管理</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="function-card" @click="goToCategories">
              <div class="card-icon">
                <el-icon><Files /></el-icon>
              </div>
              <div class="card-info">
                <h3>分类管理</h3>
                <p>商品分类设置</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="function-card" @click="goToOrders">
              <div class="card-icon">
                <el-icon><List /></el-icon>
              </div>
              <div class="card-info">
                <h3>订单管理</h3>
                <p>订单处理与跟踪</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="function-card" @click="goToStatistics">
              <div class="card-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="card-info">
                <h3>数据统计</h3>
                <p>销售与库存分析</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 功能说明区域 -->
      <div class="feature-description">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="desc-item">
              <h4>商品管理</h4>
              <ul>
                <li>农产品基础信息维护</li>
                <li>多规格SKU配置</li>
                <li>库存预警提醒</li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="desc-item">
              <h4>订单处理</h4>
              <ul>
                <li>订单全流程管理</li>
                <li>发货状态跟踪</li>
                <li>订单数据汇总</li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="desc-item">
              <h4>数据分析</h4>
              <ul>
                <li>销售数据统计</li>
                <li>库存动态监控</li>
                <li>经营状况分析</li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { useRouter } from 'vue-router';
import { 
  Goods, 
  Files, 
  List, 
  TrendCharts 
} from '@element-plus/icons-vue';

const router = useRouter();

const goToProducts = () => router.push('/products/manager');
const goToCategories = () => router.push('/products/category');
const goToOrders = () => router.push('/order/manager');
const goToStatistics = () => router.push('/statistics');
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: calc(100vh - 84px);
  background-color: #f6f8fa;
  
  .main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  .header-section {
    text-align: center;
    margin-bottom: 50px;

    h1 {
      font-size: 32px;
      color: #1a1a1a;
      margin-bottom: 12px;
      font-weight: 500;
    }

    p {
      font-size: 16px;
      color: #666;
      margin: 0;
    }
  }

  .function-area {
    margin-bottom: 50px;

    .function-card {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid #eaeaea;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        border-color: transparent;
      }

      .card-icon {
        margin-bottom: 16px;
        
        .el-icon {
          font-size: 32px;
          color: #333;
        }
      }

      .card-info {
        h3 {
          font-size: 18px;
          color: #1a1a1a;
          margin: 0 0 8px;
          font-weight: 500;
        }

        p {
          font-size: 14px;
          color: #666;
          margin: 0;
        }
      }
    }
  }

  .feature-description {
    .desc-item {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      height: 100%;
      border: 1px solid #eaeaea;

      h4 {
        font-size: 16px;
        color: #1a1a1a;
        margin: 0 0 16px;
        font-weight: 500;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          font-size: 14px;
          color: #666;
          margin-bottom: 12px;
          padding-left: 16px;
          position: relative;

          &:last-child {
            margin-bottom: 0;
          }

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #666;
          }
        }
      }
    }
  }
}
</style>

